<template>
  <a-modal
    centered
    v-model="visible"
    :title="title"
    width="80%"
    :afterClose="modalClose"
  >
    <a-spin :spinning="spinning">
      <a-form-model layout="inline" ref="form" :model="form" :rules="rules">
        <a-form-model-item label="退件标题:" prop="title">
          <a-input
            v-if="type == 1"
            :maxLength="128"
            style="width: 200px"
            v-model="form.title"
          >
          </a-input>
          <span v-else>{{ form.title }}</span>
        </a-form-model-item>
        <br />
        <a-form-model-item
          style="margin-right: 16px"
          label="退至仓库:"
          prop="warehousingId"
        >
          <!-- <a-input :maxLength="128" v-model="form.warehousingId"> </a-input>
         -->
          <a-select
            v-if="type == 1"
            show-search
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            v-model="form.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
          <span v-else>{{ wareName(form.warehousingId) }}</span>
        </a-form-model-item>
        <a-form-model-item
          style="margin-right: 16px"
          label="处理方式:"
          prop="processType"
        >
          <!-- <a-input :maxLength="128" v-model="form.processType"> </a-input> -->
          <a-select
            v-if="type == 1"
            show-search
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            v-model="form.processType.code"
            @change="processTypeChange"
            allowClear
          >
            <a-select-option
              :value="item.code"
              v-for="item in treatmentArray"
              :key="item.code"
              :titles="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
          <span v-else>{{ form.processType.name }}</span>
        </a-form-model-item>
        <a-form-model-item label="预计到仓时间:" prop="scheduledTime">
          <a-date-picker
            v-if="type == 1"
            @change="checkTime"
            :disabledDate="disabledDate"
            style="width: 200px"
            v-model="time"
          />
          <span v-else>{{ time }}</span>
        </a-form-model-item>
        <div class="addBtn">
          <a-button
            v-if="type == 1 && accType == 1"
            type="primary"
            style="margin-top: 10px"
            @click="addRow"
            >增加退件运单</a-button
          >
          <a-button
            v-if="type == 1 && accType == 1"
            type="primary"
            style="margin-top: 10px; margin-left: 10px"
            class="blueBtn"
            icon="upload"
            @click="addRow"
            >批量导入</a-button
          >
          <a
            v-if="type == 1 && accType == 1"
            style="
              margin-left: 20px;
              line-height: 35px;
              color: #2929e0;
              text-decoration: underline;
            "
            @click="upDowBtn"
          >
            下载批量导入模板
          </a>
        </div>
        <a-table
          size="small"
          style="margin-top: 10px"
          :data-source="form.logistics"
          :pagination="false"
        >
          <a-table-column
            title="物流商"
            key="logisticsName"
            data-index="logisticsName"
            align="center"
            width="100px"
          >
            <template slot-scope="text, record">
              <a-select
                v-if="type == 1"
                show-search
                placeholder="未选择"
                option-filter-prop="children"
                :filter-option="filterOption"
                @change="(value, option) => changeLogisticsName(option, record)"
                v-model="record.logisticsId"
                size="small"
              >
                <a-select-option
                  :value="item.key"
                  v-for="item in logistics"
                  :key="item.key"
                  :name="item.title"
                >
                  {{ item.title }}
                </a-select-option>
              </a-select>
              <span v-else>{{ logisticsName(record.logisticsId) }}</span>
            </template>
          </a-table-column>
          <a-table-column
            key="waybillNm"
            data-index="waybillNm"
            width="150px"
            align="center"
          >
            <span slot="title" class="tableTitle"
              ><span class="start">*</span> 运单号</span
            >
            <template slot-scope="text, record, index">
              <a-form-model-item
                :prop="'logistics.' + index + '.waybillNm'"
                :rules="rules.required"
              >
                <a-input
                  v-if="type == 1"
                  :maxLength="128"
                  size="small"
                  v-model="record.waybillNm"
                />
                <span v-else>{{ record.waybillNm }}</span>
              </a-form-model-item>
            </template>
          </a-table-column>
          <a-table-column key="productName" align="center" width="100px">
            <span slot="title" class="tableTitle"
              ><span class="start">*</span> 商品名称</span
            >
            <template slot-scope="text, record, index">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item
                  :prop="
                    'logistics.' + index + '.items.' + index1 + '.productName'
                  "
                  :rules="rules.required1"
                >
                  <a-input
                    v-if="type == 1"
                    :maxLength="128"
                    size="small"
                    disabled
                    v-model="record.items[index1].productName"
                  />
                  <span v-else>{{ record.items[index1].productName }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>
          <a-table-column key="sku" align="center">
            <span slot="title" class="tableTitle"
              ><span class="start">*</span> 退件SKU</span
            >
            <template slot-scope="text, record, index">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item
                  :prop="'logistics.' + index + '.items.' + index1 + '.sku'"
                  :rules="rules.required"
                >
                  <!-- <a-input
                  :maxLength="128"
                  size="small"
                  disabled
                  v-model="record.productInfo[index1].productName"
                /> -->
                  <a-select
                    v-if="type == 1"
                    v-model="record.items[index1].sku"
                    style="width: 120px"
                    size="small"
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @change="
                      (value, option) =>
                        changeSku(option, item, record, index, index1)
                    "
                    placeholder="请选择SKU"
                  >
                    <a-select-option
                      :value="v.sku"
                      v-for="v in RetreatStockArray"
                      :key="v.id"
                      :sku="v.sku"
                      :name="v.skuName"
                      :skuid="v.skuId"
                      :productTag="v.productTag"
                    >
                      <a-tooltip>
                        <template slot="title">
                          {{ v.sku }}
                        </template>
                        {{ v.sku }}
                      </a-tooltip>
                    </a-select-option>
                  </a-select>
                  <span v-else>{{ record.items[index1].sku }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>
          <a-table-column key="quantity" align="center" width="80px">
            <span slot="title" class="tableTitle"
              ><span class="start">*</span> 数量</span
            >
            <template slot-scope="text, record, index">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item
                  :prop="
                    'logistics.' + index + '.items.' + index1 + '.quantity'
                  "
                  :rules="rules.required"
                >
                  <a-input-number
                    v-if="type == 1"
                    :min="1"
                    style="width: 50px"
                    size="small"
                    v-model="record.items[index1].quantity"
                  />
                  <span v-else>{{ record.items[index1].quantity }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>
          <a-table-column key="fnSku" align="left" width="160px">
            <span slot="title" style="margin-left: 20px" class="tableTitle"
              >FNSKU</span
            >
            <template slot-scope="text, record">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item>
                  <a-input
                    v-if="type == 1"
                    :maxLength="128"
                    style="width: 80px"
                    size="small"
                    v-model="record.items[index1].fnSku"
                  />
                  <span v-else>{{ record.items[index1].fnSku }}</span>
                  <span v-if="type == 1">
                    <a-icon
                      v-if="index1 == record.items.length - 1"
                      @click="productInfoAdd(record)"
                      style="margin-left: 10px"
                      type="plus-circle"
                    />
                    <a-icon
                      @click="productInfoDelet(record, index1)"
                      style="margin-left: 10px"
                      type="minus-circle"
                    />
                  </span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>
          <!-- <a-table-column key="push" align="center" width="60px">
          <template slot-scope="text, record">
            <div v-for="(item, index1) in record.productInfo" :key="index1">

            </div>
          </template>
        </a-table-column> -->
          <a-table-column
            key="boxQuantity"
            data-index="boxQuantity"
            align="center"
            width="80px"
          >
            <span slot="title" class="tableTitle"
              ><span class="start">*</span> 箱数</span
            >
            <template slot-scope="text, record, index">
              <a-form-model-item
                :prop="'logistics.' + index + '.boxQuantity'"
                :rules="rules.required"
              >
                <a-input-number
                  v-if="type == 1"
                  :min="1"
                  :maxLength="128"
                  size="small"
                  v-model="record.boxQuantity"
                />
                <span v-else>{{ record.boxQuantity }}</span>
              </a-form-model-item>
            </template>
          </a-table-column>
          <a-table-column key="box" align="center" width="180px">
            <span slot="title" class="tableTitle">箱子<br />长*宽*高cm</span>
            <template slot-scope="text, record">
              <a-input
                v-if="type == 1"
                style="width: 40px; margin-right: 10px"
                :maxLength="128"
                size="small"
                v-model="record.length"
              />
              <a-input
                v-if="type == 1"
                style="width: 40px; margin-right: 10px"
                :maxLength="128"
                size="small"
                v-model="record.wide"
              />
              <a-input
                v-if="type == 1"
                style="width: 40px"
                :maxLength="128"
                size="small"
                v-model="record.high"
              />
              <span v-else>{{
                record.length && record.wide && record.high
                  ? record.length + "*" + record.wide + "*" + record.high
                  : ""
              }}</span>
            </template>
          </a-table-column>
          <a-table-column key="carat" align="center" width="55px">
            <span slot="title" class="tableTitle">箱子<br />重量g</span>
            <template slot-scope="text, record">
              <a-input
                v-if="type == 1"
                style="width: 50px"
                :maxLength="128"
                size="small"
                v-model="record.carat"
              />
              <span v-else>{{ record.carat }}</span>
            </template>
          </a-table-column>
          <a-table-column key="sellableQuantity" align="center" width="80px">
            <span slot="title" class="tableTitle">可售商品<br />数量</span>
            <template slot-scope="text, record">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item>
                  <a-input-number
                    v-if="type == 1"
                    style="width: 50px"
                    size="small"
                    v-model="record.items[index1].sellableQuantity"
                  />
                  <span v-else>{{
                    record.items[index1].sellableQuantity
                  }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>
          <a-table-column key="unsalableQuantity" align="center" width="90px">
            <span slot="title" class="tableTitle">不可售商品<br />数量</span>
            <template slot-scope="text, record">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item>
                  <a-input-number
                    v-if="type == 1"
                    style="width: 50px"
                    size="small"
                    v-model="record.items[index1].unsalableQuantity"
                  />
                  <span v-else>{{
                    record.items[index1].unsalableQuantity
                  }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>

          <a-table-column key="remark" align="center" width="160px">
            <span slot="title" class="tableTitle">备注</span>
            <template slot-scope="text, record">
              <div v-for="(item, index1) in record.items" :key="index1">
                <a-form-model-item>
                  <a-input
                    v-if="type == 1"
                    :maxLength="128"
                    size="small"
                    v-model="record.items[index1].remark"
                  />
                  <span v-else>{{ record.items[index1].remark }}</span>
                </a-form-model-item>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            v-if="type == 1"
            key="operation"
            data-index="operation"
            title="操作"
            width="55px"
            align="center"
          >
            <template slot-scope="text, record, index">
              <a-popconfirm
                title="确定删除吗?"
                okText="确定"
                cancelText="取消"
                @confirm="deletRow(index)"
              >
                <a
                  href="javascript:;"
                  style="
                    color: rgb(243, 56, 29);
                    border-bottom: 1px solid rgb(243, 56, 29);
                  "
                  >删除</a
                >
              </a-popconfirm>
            </template>
          </a-table-column>
        </a-table>
        <h3 class="upLoad">
          上传文件<span v-if="tableType == 1 && accType == 1"
            >支持png jpg pdf excel格式，最多上传6个文件</span
          >
        </h3>
        <a-upload
          v-if="type == 1 && accType == 1"
          class="upload-list-inline"
          :action="baseUrl + '/by-file/uploadFile'"
          :beforeUpload="beforeUploads"
          name="file"
          :file-list="fileList"
          :multiple="true"
          list-type="picture"
          :headers="headersRow"
          @change="(fileList) => handleChangeRow(fileList)"
          @preview="preview"
        >
          <a-button
            v-if="fileList.length < 6"
            style="
              color: #fff;
              border: none;
              margin-left: 8px;
              margin-right: 20px;
            "
            class="blueBtn"
            type="primary"
          >
            <a-icon type="upload" /> 上传文件
          </a-button>
        </a-upload>
        <div class="files" v-else>
          <div v-if="form.files.length != 0">
            <div v-for="(item, index) in form.files" :key="index">
              <a-icon type="link" />
              <a :href="item" target="_blank">{{ item }}</a>
            </div>
          </div>
          <div v-else>暂无</div>
        </div>
      </a-form-model>
    </a-spin>
    <template slot="footer">
      <!-- <a-button
        style="background: #d7d7d7; color: #fff; border: none"
        @click="type = type == 1 ? 2 : 1"
        >切换</a-button
      > -->
      <!-- 客户新增取消按钮 -->
      <a-button
        v-if="type == 1 && accType == 1"
        style="background: #d7d7d7; color: #fff; border: none"
        @click="visible = false"
        >取消</a-button
      >
      <!-- 客户提交申请按钮 -->
      <a-button
        v-if="type == 1 && accType == 1 && addOrEdit == 1"
        :loading="loading"
        type="primary"
        @click="submit"
        >提交</a-button
      >
      <!-- 客服审核按钮 -->
      <a-button
        v-if="type == 2 && accType == 2 && tableType == 1"
        :loading="loading"
        type="danger"
        @click="audit('AUDIT_FAIL')"
        >不通过</a-button
      >
      <a-button
        v-if="type == 2 && accType == 2 && tableType == 1"
        :loading="loading"
        type="primary"
        @click="audit('AWAIT_RECEIVE')"
        >审核通过</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import baseUrl from "@/utils/baseUrl";
import { removefile } from "@/apis/common";
import {
  getRetreatStock,
  by_retreatApply,
  by_retreatApply_detail, //获取详情
  by_retreatApply_status,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
export default {
  // 仓库，处理方式，物流商，表格类型1待审核2待接收3待确认4已接收5处理完成6取消入库7不通过8已关闭
  props: ["warehouse", "treatmentArray", "logistics", "tableType"],
  data() {
    return {
      visible: false,
      spinning: false,
      loading: false, //提交按钮loading
      type: 1, // 展示类型1编辑2信息
      addOrEdit: 1, // 1新增2编辑
      accType: sessionStorage.getItem("accType"), //账户类型1客户2客服3仓库
      title: "退件申请",
      time: null,
      form: {
        title: null,
        warehousingId: null,
        processType: {
          code: null,
          name: null,
        },
        scheduledTime: null,
        logistics: [],
        files: [],
      },
      rules: {
        title: [
          {
            required: true,
            message: "退件标题必填!",
            trigger: "blur",
          },
        ],
        warehousingId: [
          {
            required: true,
            message: "退至仓库必填!",
            trigger: "blur",
          },
        ],
        processType: [
          {
            required: true,
            message: "处理方式必填!",
            trigger: "blur",
          },
        ],
        scheduledTime: [
          {
            required: true,
            message: "预计到仓时间必填!",
            trigger: "change",
          },
        ],
        required: {
          required: true,
          message: " ",
          trigger: "blur",
        },
        required1: {
          required: true,
          message: " ",
          trigger: "change",
        },
      },
      //sukArry
      RetreatStockArray: [],
      fileList: [],
      fileArray: [],
      baseUrl,
      //上传文件请求头
      headersRow: {
        authorization: "authorization-text",
        token: sessionStorage.getItem("tk"),
      },
      retreatCode: null, //详情ID
    };
  },
  methods: {
    //select根据输入筛选，符合返回true
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 选择处理方式时赋值name
    processTypeChange(value, option) {
      // console.log(option.data.attrs.titles);
      this.form.processType.name = option.data.attrs.titles;
    },
    // 选择日期
    checkTime(date, dateString) {
      this.form.scheduledTime = dateString;
    },
    //不能选的日期
    disabledDate(current) {
      //   return current && current < moment().endOf("day");
      //   return current < moment().subtract(1, "day");
      return (
        current < moment().subtract(1, "days") ||
        current > moment().add(60, "d")
      );
    },
    //下载导出模板
    async upDowBtn() {
      //   let res = await upDow();
      //   const blob = new Blob([res], {
      //     type: "application/vnd.ms-excel",
      //   });
      //   const fileName = "入库申请批量导入模板.xlsx";
      //   const linkNode = document.createElement("a");
      //   linkNode.download = fileName; //a标签的download属性规定下载文件的名称
      //   linkNode.style.display = "none";
      //   linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
      //   document.body.appendChild(linkNode);
      //   linkNode.click(); //模拟在按钮上的一次鼠标单击
      //   URL.revokeObjectURL(linkNode.href); // 释放URL 对象
      //   document.body.removeChild(linkNode);
    },
    // 选择物流商时赋值物流商名字
    changeLogisticsName(option, record) {
      record.logisticsName = option.data.attrs.name;
    },
    // 选择sku赋值商品名称
    changeSku(option, item, record, index, index1) {
      item.sku = null;
      let flag = true;
      // sku查重
      record.items.forEach((v) => {
        if (option.data.attrs.sku === v.sku) {
          flag = false;
          item.productName = null;
          this.$message.error("同一箱子不能添加多个同名SKU！");
        }
      });
      if (flag) {
        item.sku = option.data.attrs.sku;
        item.productName = option.data.attrs.name;
        // 触发商品名校验，不然红框
        this.$refs.form.validateField(
          "logistics." + index + ".items." + index1 + ".productName"
        );
      }
    },
    //获取SKU下拉框选择值
    async getSelection() {
      let res = await getRetreatStock();
      if (res.code === "200") {
        this.RetreatStockArray = res.responseBody;
      }
    },
    // 新增运单
    addRow() {
      this.form.logistics.push({
        logisticsId: null,
        logisticsName: null,
        waybillNm: null,
        items: [
          {
            productName: null,
            sku: null,
            quantity: null,
            fnSku: null,
            sellableQuantity: null,
            unsalableQuantity: null,
            remark: null,
          },
        ],
        boxQuantity: null,
        length: null,
        wide: null,
        high: null,
        carat: null,
      });
    },
    // 删除运单
    deletRow(index) {
      this.form.logistics.splice(index, 1);
    },
    //新增商品信息
    productInfoAdd(record) {
      record.items.push({
        productName: null,
        sku: null,
        quantity: null,
        fnSku: null,
        sellableQuantity: null,
        unsalableQuantity: null,
        remark: null,
      });
    },
    // 删除商品信息
    productInfoDelet(record, index) {
      if (record.items.length == 1) {
        this.$message.error("每个箱子最少存放一个商品！");
      } else {
        record.items.splice(index, 1);
      }
    },
    // 限制上传文件
    beforeUploads(file) {
      return new Promise((resolve, reject) => {
        this.files = file;
        console.log(file.type);
        const isLt6M = file.size / 1024 / 1024 < 6;
        const pdf = file.type === "application/pdf";
        const excel =
          file.type === "application/vnd.ms-excel" ||
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        const img =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg";
        if (!pdf && !img && !excel) {
          this.$message.error("上传文件只能是 png、jpeg、jpg、PDF、excel!");
          return reject(false);
        }
        if (!isLt6M) {
          this.$message.error("文件大小限制小于6MB!");
          return reject(false);
        }

        return resolve(true);
      });
    },
    //上传成功回调 每一行上传文件
    async handleChangeRow(info) {
      this.fileList = info.fileList;
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} 上传成功`);
        // this.fileArray.push(info.file.response.responseBody[0]);
        this.form.files.push(info.file.response.responseBody[0]);
        // this.form.filePath = this.fileArray.join(",");
      } else if (info.file.status === "removed") {
        // 删除上传文件列表对应操作
        let index = this.form.files.indexOf(info.file.response.responseBody[0]);
        this.form.files.splice(index, 1);
        let res = await removefile(info.file.response.responseBody);
        res;
      }
    },
    // 点击上传文件预览
    preview(file) {
      window.open(file.response.responseBody[0]);
    },
    // 新增
    show() {
      this.type = 1;
      this.visible = true;
    },
    // 展示信息模式
    infoShow(id) {
      this.type = 2;
      this.retreatCode = id;
      this.visible = true;
      this.getInfo();
    },
    // 关闭时
    modalClose() {
      this.$refs.form.resetFields();
      this.form.logistics = [];
      this.form.files = [];
      this.fileList = [];
      // this.fileArray = [];
      this.loading = false;
      this.time = null;
      this.retreatCode - null;
    },
    // 新增提交
    submit() {
      console.log(this.form);
      this.$refs.form
        .validate()
        .then(async () => {
          if (this.form.logistics.length == 0) {
            return this.$message.error("请添加运单信息");
          }
          this.loading = true;
          const { code } = await by_retreatApply(this.form);
          if (code == 200) {
            this.$message.success("提交成功！");
            this.$parent.search();
            this.visible = false;
            this.loading = false;
          }
        })
        .catch(() => {
          this.$message.error("当前退件申请有必填项未填写，请检查后再提交！");
        });
    },

    //点击审核0不通过1通过
    async audit(status) {
      this.loading = true;
      const { code } = await by_retreatApply_status({
        id: this.form.id,
        status: status,
      });
      if (code == 200) {
        this.$message.success("审核成功！");
        this.$parent.search();
        this.visible = false;
        this.loading = false;
      }
    },
    //获取详情
    async getInfo() {
      this.spinning = true;
      const { code, responseBody } = await by_retreatApply_detail(
        this.retreatCode
      );
      this.spinning = false;
      if (code == 200) {
        this.form = responseBody.basicInfo;
        this.form.logistics = responseBody.logisticInfos;
        this.form.scheduledTime =
          responseBody.basicInfo.scheduledTime.split("T")[0];
        this.time = this.form.scheduledTime;
      }
    },
  },
  created() {
    this.getSelection();
  },
  computed: {
    ...mapState(["logisticsArray"]),
    wareName() {
      return (id) => {
        let name = null;
        this.warehouse.forEach((item) => {
          if (item.warehouseId == id) {
            name = item.titleName;
          }
        });
        return name;
      };
    },
    logisticsName() {
      return (id) => {
        let name = null;
        this.logistics.forEach((item) => {
          if (item.key == id) {
            name = item.title;
          }
        });
        return name;
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
.tableTitle {
  .start {
    color: red;
  }
}
/deep/ .ant-table-thead > tr > th {
  background: #fafafa !important;
}
.upLoad {
  margin-top: 10px;
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    color: red;
    margin-left: 20px;
  }
}
/deep/.ant-upload-list-picture .ant-upload-list-item,
.ant-upload-list-picture-card .ant-upload-list-item {
  float: left;
  width: 300px;
  margin-right: 8px;
}
/deep/.ant-table-tbody .ant-form-explain {
  display: none;
}
/deep/.ant-table-tbody .ant-form-item {
  margin-bottom: 0;
}
/deep/ .ant-form-inline .ant-form-item {
  margin-right: 0;
}
/deep/ .ant-input-number-handler-wrap {
  display: none;
}
.files {
  display: flex;
  align-items: center;
  a {
    margin-left: 10px;
    color: #333333;
  }
}
</style>